import { CheckboxGroupComponent } from './checkbox-group.component';
import { Component, OnInit, Input, Output, OnChanges, EventEmitter, ElementRef, Optional, ViewChild, forwardRef, SimpleChanges, AfterViewInit, } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ElementuiService } from './../elementui.service';

@Component({
  selector: 'el-checkbox',
  templateUrl: './checkbox.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: CheckboxComponent,
    multi: true
  }],
})
export class CheckboxComponent implements OnInit, OnChanges, ControlValueAccessor {
  private hostGroup: any;
  private el: any;
  @ViewChild('content') content: any;
  @Input() disabled: boolean = false;
  @Input() border: boolean = false;
  @Input() label: string = '';
  @Input() model: any;
  @Input() indeterminate: boolean = false;
  @Input() checked: boolean = false;
  @Input() name: string = '';
  @Input() trueLabel: string | number = '';
  @Input() labels: any = [];
  @Input() parentIsGroup: boolean = false;
  @Input() isFocus: boolean = false;
  @Output('change') modelChange: EventEmitter<any> = new EventEmitter();
  private controlChange: any = function () { };
  private controlTouch: any = function () { };

  constructor(hostGroup: CheckboxGroupComponent, el: ElementRef, private ElementuiService: ElementuiService) {
    this.el = el;
    this.hostGroup = hostGroup;
  }


  showLabelClass()  {
    var /** @type {?} */ contentText = this.content && this.content.nativeElement.innerText;
    return (!contentText || contentText.length < 1);
  }
  writeValue(value: any): void {
    this.model = value;
  }
  registerOnChange(fn: any): void {
    this.controlChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.controlTouch = fn;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!changes || !changes.model)
      return;
    if (changes.model.isFirstChange())
      return;
    this.changeHandle(changes.model.currentValue, true);
  }

  isChecked() {
    if (this.parentIsGroup) {
      return this.hostGroup.model.indexOf(this.label) > -1;
    }

    return this.model;
  }


  changeHandle(t: any, notEmit: boolean) {
    if (this.parentIsGroup) {
      
       this.hostGroup.updateModelFromChildren(t, this.label);
       return this.isLimitDisabled();
    }
    this.model = t;
    this.checked = this.isChecked();
    if (notEmit)
      return;
    this.modelChange.emit(this.model);
    this.controlChange(this.model);
    return;
  }

  isLimitDisabled():boolean {
    if(this.hostGroup.model.length) {
      if(this.hostGroup.max <= this.hostGroup.model.length && !this.model) {
          return true;
      }
    }
    return false;
  }

  ngOnInit(): void {
    var _this = this;
    var /** @type {?} */ nativeElement = this.el.nativeElement;
    this.parentIsGroup = this.ElementuiService.isParentTag(nativeElement, 'el-checkbox-group');
    this.ElementuiService.removeNgTag(nativeElement);
    // update model from group
    if (this.parentIsGroup) {
      this.labels = this.hostGroup.model;
      this.model = this.isChecked();
      // update handle
      this.hostGroup.subscriber.push(function () {
        _this.model = _this.isChecked();
        _this.checked = _this.isChecked();
      });
    }

    if (this.parentIsGroup) {
       this.isLimitDisabled();
    }
    this.checked = this.isChecked();
  }

  checkboxSize() {
    return (this.hostGroup.size && this.border) ? ' el-checkbox--' + this.border : '';
  }
}
